<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本差异比较工具</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            margin: 0;
            padding: 20px;
        }
        h1 {
            color: #333;
            text-align: center;
        }
        form {
<!--            max-width: 600px;-->
            margin: 0 auto;
            background: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        label {
            display: block;
            margin-bottom: 5px;
            color: #333;
        }
        input[type="text"] {
            width: 100%;
            min-height: 100px;
            padding: 10px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-sizing: border-box;
            font-size: 36px; /* 调整字体大小 */
        }
        .configButton {
            width: 100%;
            padding: 10px;
            background-color: #007BFF;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .configButton:hover {
            background-color: #0056b3;
        }
        h2 {
            color: #333;
            text-align: center;
            margin-top: 30px;
        }
        p {
            text-align: center;
            color: #333;
        }
        .diff {
            background-color: #ffcccc;
        }
        .diff {
            background-color: #ffcccc;
        }
        .editable {
            border: 1px solid #ccc;
            padding: 15px;
            min-height: 100px;
            margin: 10px 0;
            border-radius: 5px;
            background-color: #fff;
            font-size: 36px; /* 调整字体大小 */
            line-height: 1.5;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }
        .editable:hover {
            border-color: #007BFF;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
    <!--    .same {-->
    <!--        background-color: #e6ffe6;-->
    <!--    }-->


        /* 模态弹窗样式 */
        .modal {
            display: none; /* 默认隐藏 */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        }

        /* Modal Content/Box */
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto; /* 15% from the top and centered */
            padding: 20px;
            border: 1px solid #888;
            width: 650px; /* Could be more or less, depending on screen size */
        }

        /* The Close Button */
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

        #closeModuleButton1 {
            margin-top: 10px;
            padding: 10px 20px;
            background-color: #4caf50;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        #closeModuleButton2 {
            margin-top: 10px;
            padding: 10px 20px;
            background-color: #4caf50;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }


        /* 添加页脚样式 */
        footer {
            text-align: center;
            margin-top: 50px;
            padding: 20px 0;
            background-color: #f4f4f9;
        }
    </style>
</head>
<body>
<h1>文本差异比较工具</h1>
<form id="dataForm">
    <label for="input1">输入表单1:</label>
    <input type="text" id="input1" name="input1">

    <label for="input2">输入表单2:</label>
    <input type="text" id="input2" name="input2">

    <button type="button" onclick="compareText()" class="configButton">比较文本</button>
</form>

<h2>结果</h2>
<div contenteditable="true" id="result1" class="editable"></div>
<div contenteditable="true" id="result2" class="editable"></div>
<button type="button" onclick="fillInputFromResult()" class="configButton">编辑确认</button>
<!-- 触发弹窗的按钮 -->
<footer>
    <button id="showModalId1" onclick="showModal()" style="text-align: center; margin: 20px;">欢迎打赏，您的支持将是我继续前行的最大动力，感谢!</button>
</footer>


<!-- 模态弹窗的结构 -->
<div id="myModal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeModal()">&times;</span>
        <!-- 弹窗内容将被插入到这里 -->
    </div>
</div>
<script>
    function compareText() {
        // 获取输入值
        const input1 = document.getElementById('input1').value;
        const input2 = document.getElementById('input2').value;

        // 将输入字符串拆分为字符数组
        const array1 = input1.split('');
        const array2 = input2.split('');

        // 创建结果字符串
        let result1 = '';
        let result2 = '';

        // 用于标记是否在相同或差异区域
        let inSame1 = false;
        let inSame2 = false;
        let inDiff1 = false;
        let inDiff2 = false;

        // 比较字符数组
        for (let i = 0; i < Math.max(array1.length, array2.length); i++) {
            const char1 = array1[i] || '';
            const char2 = array2[i] || '';

            if (char1 === char2) {
            // 如果之前在差异区域，则关闭差异区域
                if (inDiff1) {
                    result1 += '</span>';
                    inDiff1 = false;
                }
                if (inDiff2) {
                    result2 += '</span>';
                    inDiff2 = false;
                }
                 // 如果不在相同区域，则开启相同区域
                if (!inSame1) {
                    result1 += '<span class="same">';
                    inSame1 = true;
                }
                if (!inSame2) {
                    result2 += '<span class="same">';
                    inSame2 = true;
                }
                result1 += char1;
                result2 += char2;
            } else {
            // 如果之前在相同区域，则关闭相同区域
                if (inSame1) {
                    result1 += '</span>';
                    inSame1 = false;
                }
                if (inSame2) {
                    result2 += '</span>';
                    inSame2 = false;
                }
                // 如果不在差异区域，则开启差异区域
                if (!inDiff1) {
                    result1 += '<span class="diff">';
                    inDiff1 = true;
                }
                if (!inDiff2) {
                    result2 += '<span class="diff">';
                    inDiff2 = true;
                }
                result1 += char1;
                result2 += char2;
            }
        }

        // 如果最后一个是相同或差异，需要关闭 span 标签
        if (inSame1) {
            result1 += '</span>';
        }
        if (inSame2) {
            result2 += '</span>';
        }
        if (inDiff1) {
            result1 += '</span>';
        }
        if (inDiff2) {
            result2 += '</span>';
        }

        // 显示结果
        document.getElementById('result1').innerHTML = result1;
        document.getElementById('result2').innerHTML = result2;
    }

    function fillInputFromResult(resultId, inputId) {
        const resultDiv = document.getElementById(resultId);
        const inputField = document.getElementById(inputId);

        // 获取编辑后的内容并去除 HTML 标签
        const cleanContent = resultDiv.innerText;

        // 填充到输入框
        inputField.value = cleanContent;
    }

    function fillInputFromResult() {
        const resultDiv1 = document.getElementById("result1");
        const inputField1 = document.getElementById("input1");
        // 获取编辑后的内容并去除 HTML 标签
        const cleanContent1 = resultDiv1.innerText;
        // 填充到输入框
        inputField1.value = cleanContent1;

        const resultDiv2 = document.getElementById("result2");
        const inputField2 = document.getElementById("input2");
        // 获取编辑后的内容并去除 HTML 标签
        const cleanContent2 = resultDiv2.innerText;
        // 填充到输入框
        inputField2.value = cleanContent2;
            // 清空结果区域
        resultDiv1.innerHTML = '';
        resultDiv2.innerHTML = '';
    }



     function showModal() {
        // 获取模态弹窗元素
        var modal = document.getElementById('myModal');
        // 显示模态弹窗
        modal.style.display = 'block';

        // 定义要插入弹窗的HTML内容
        var htmlContent = `
            <button id="closeModuleButton1" onclick="closeModal()">关闭弹窗</button>
            <h3 style="display: ">感谢您的陪伴与信任！如果您觉得我们的软件给您带来了价值</h3>
            <h3 style="display: ">请考虑打赏一下，您的支持将是我继续前行的最大动力,感谢!</h3>
            <table>
                <tr>
                         <img id="myImage" src="" alt="Base64 Image" width="300" height="300" border=0>
                </tr>
            </table>
            <button id="closeModuleButton2" onclick="closeModal()">关闭弹窗</button>
        `;

        // 获取弹窗内容容器并插入HTML内容
        var modalContent = modal.querySelector('.modal-content');
        modalContent.innerHTML = htmlContent;
        document.getElementById('myImage').src = base64Image;
    }

    function closeModal() {
        // 获取模态弹窗元素
        var modal = document.getElementById('myModal');
        // 隐藏模态弹窗
        modal.style.display = 'none';
    }


    const base64Image = "";
</script>
</body>
</html>
